import style from '@/assets/home.module.scss';

import { Home, useTouchBottom } from '@/components';
import { HttpResponse } from '@/utils';

export interface ProjectProps {
    children?: string | React.ReactElement | React.ReactElement[];
}

function Rtrend({ page }: { page: number }) {
    const { data: res } = useSwr<
        HttpResponse<
            {
                address: string;
                city: string;
                id: number;
                img: string;
                msg: string;
                name: string;
                openTime: string;
                price: number;
                province: string;
            }[]
        >
    >(`trend/${page}?uid=${localStorage.getItem('id')}`, axios.get);
    const ls = ObjectUtils.wantArray(res?.data);
    return (
        <>
            {ls.map(
                (item: {
                    address: string;
                    city: string;
                    id: number;
                    img: string;
                    msg: string;
                    name: string;
                    openTime: string;
                    price: number;
                    province: string;
                }) => (
                    <Home.trend key={Math.random()} data={item} />
                ),
            )}
        </>
    );
}

function Rplace() {
    const { data: res } = useSwr<
        HttpResponse<{
            content: {
                id: number;
                avatar: string;
                name: string;
                phone: string;
                email: string;
            }[];
            next: boolean;
            total: number;
        }>
    >('user/1', axios.get);

    const ls = ObjectUtils.wantArray(res?.data.content);
    return (
        <>
            {ls.map((item) => (
                <Home.place key={Math.random()} />
            ))}
        </>
    );
}

function Project({ children }: ProjectProps) {
    console.log(time().format('{YYYY} HH:mm:ss'), `home render`);

    const history = withRouter();
    const [bottom] = useTouchBottom(0);
    const [page, set_page] = useState(1);
    const [name, set_name] = useState('');
    const [trends, set_trends] = useState<React.ReactElement[]>([]);

    useEffect(() => {
        set_trends([...trends, <Rtrend page={page} key={Math.random()} />]);
    }, [page]);
    useEffect(() => {
        if (bottom) set_page(page + 1);
    }, [bottom]);

    const id = localStorage.getItem('id');
    if (id == null) {
        history.push('/login');
    }

    return (
        
        <section className={style['home']}>
            <div className={style['place']}>
                <p className={style['title']}>Place</p>
                <article className='flex overflow-y-scroll py-1'>
                    <Rplace />
                </article>
            </div>
            <div className={style['trend']}>
                <article className={`p-3`}>
                    <div style={{ display: 'none' }}>
                        <Rtrend page={page + 1} />
                    </div>
                    {trends}
                </article>
            </div>
        </section>
    );
}

export default Project;
